<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Per-Series Properties</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>
  <body>
    <h2>Chart with per-series properties</h2>
    <div id="demodiv"></div>
    <h2>Chart with per-series properties with legend.</h2>
    <div id="demodiv2"></div>
    <h2>First graph, using old-style series specification.</h2>
    <div id="demodiv3"></div>
    <script type="text/javascript">
      data = function() {
        var zp = function(x) { if (x < 10) return "0"+x; else return x; };
        var r = "date,parabola,line,another line,sine wave,sine wave2\n";
        for (var i=1; i<=31; i++) {
          r += "200610" + zp(i);
          r += "," + 10*(i*(31-i));
          r += "," + 10*(8*i);
          r += "," + 10*(250 - 8*i);
          r += "," + 10*(125 + 125 * Math.sin(0.3*i));
          r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI));
          r += "\n";
        }
        return r;
      };
      g = new Dygraph(
              document.getElementById("demodiv"),
              data,
              {
                strokeWidth: 2,
		series : {
                  'parabola': {
                    strokeWidth: 0.0,
                    drawPoints: true,
                    pointSize: 4,
                    highlightCircleSize: 6
                  },
                  'line': {
                    strokeWidth: 1.0,
                    drawPoints: true,
                    pointSize: 1.5
                  },
                  'sine wave': {
                    strokeWidth: 3,
                    highlightCircleSize: 10
                  },
                  'sine wave2': {
                    strokePattern: [10, 2, 5, 2],
                    strokeWidth: 2,
                    highlightCircleSize: 3
                  }
                }
              }
          );
      g2 = new Dygraph(
              document.getElementById("demodiv2"),
              data,
              {
                legend: 'always',
                strokeWidth: 2,
                'parabola': {
                  strokePattern: null,
                  drawPoints: true,
                  pointSize: 4,
                  highlightCircleSize: 6
                },
                'line': {
                  strokePattern: Dygraph.DASHED_LINE,
                  strokeWidth: 1.0,
                  drawPoints: true,
                  pointSize: 1.5
                },
                'another line': {
                  strokePattern: [25, 5]
                },
                'sine wave': {
                  strokePattern: Dygraph.DOTTED_LINE,
                  strokeWidth: 3,
                  highlightCircleSize: 10
                },
                'sine wave2': {
                  strokePattern: Dygraph.DOT_DASH_LINE,
                  strokeWidth: 2,
                  highlightCircleSize: 3
                }
              }
          );
      g3 = new Dygraph(
              document.getElementById("demodiv3"),
              data,
              {
                strokeWidth: 2,
                'parabola': {
                  strokeWidth: 0.0,
                  drawPoints: true,
                  pointSize: 4,
                  highlightCircleSize: 6
                },
                'line': {
                  strokeWidth: 1.0,
                  drawPoints: true,
                  pointSize: 1.5
                },
                'sine wave': {
                  strokeWidth: 3,
                  highlightCircleSize: 10
                },
                'sine wave2': {
                  strokePattern: [10, 2, 5, 2],
                  strokeWidth: 2,
                  highlightCircleSize: 3
                }
              }
          );

    </script>
</body>
</html>
